<!DOCTYPE html>
<html>
<head>
#include("/admin/_common/head.html")
<title>字典</title>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" lay-filter="module-form">
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="模糊查询" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">代码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="key" placeholder="模糊查询" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <div class="layui-input-inline">
                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="module-query">
                                <i class="layui-icon layui-icon-search"></i>
                                查询
                            </button>
                            <button type="reset" class="pear-btn pear-btn-md">
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="layui-col-md5">    
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="module-table" class="layui-table"
                    lay-data="{url:'#(ctxPath)/admin/system/dict/list?parentId=0&sortField=createdTime&sortType=desc', page:true, initSort: {field:'sortNum', type:'asc'}, height: 'full-225', toolbar: '#table-toolbar', defaultToolbar: ['filter', 'print', 'exports']}"
                    lay-filter="module-table">
                    <thead>
                        <tr>
                            <th lay-data="{field: 'status', align: 'center', width: 70, templet: '#bean-status'}">状态</th>
                            <th lay-data="{field: 'name', align: 'left', width: 130}">名称</th>
                            <th lay-data="{field: 'key', align: 'left', width: 130}">代码</th>
                            <th lay-data="{toolbar: '#operate-bar', align: 'center', width: 150}">操作</th>
                            <th lay-data="{field: 'remark', align: 'center', width: 150}">说明</th>
                            <th lay-data="{field: 'sortNum', align: 'center', width: 80}">排序</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <div class="layui-col-md7">
        <div class="layui-card">
        <div class="layui-card-body">
        <input type="hidden" name="parentId" value="0">
        <svg class="empty" style="margin-top: 75px;margin-left: 75px;margin-bottom: 75px;" width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" fillRule="evenodd">
                <g transform="translate(24 31.67)">
                    <ellipse fillOpacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse>
                    <path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" fill="#AEB8C2"></path>
                    <path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" fill="url(#linearGradient-1)" transform="translate(13.56)"></path>
                    <path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path>
                    <path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" fill="#DCE0E6"></path>
                </g>
                <path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" fill="#DCE0E6"></path>
                <g transform="translate(149.65 15.383)" fill="#FFF">
                    <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse>
                    <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path>
                </g>
            </g>
        </svg>
        <div id="ID-detail-table">
            <table lay-filter="detail-table"></table>
        </div>
        </div>
        </div>
    </div>
</div>

    <!-- 数据表单头部工具栏操作按钮 -->
    <script type="text/html" id="table-toolbar">
    <div class="pear-btn-group">
    #shiroHasPermission('system:dict:add')
        <button class="pear-btn pear-btn-primary pear-btn-xs" round lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</button>
    #end
    </div>
    </script>

    <!-- 数据表单头部工具栏操作按钮 -->
    <script type="text/html" id="detail-table-toolbar">
    <div class="pear-btn-group">
    #shiroHasPermission('system:dict:add')
        <button class="pear-btn pear-btn-primary pear-btn-xs" round lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</button>
    #end
    #shiroHasPermission('system:dict:del')
        <button class="pear-btn pear-btn-danger pear-btn-xs" round lay-event="batchRemove"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
    #end
    </div>
    </script>

    <!-- 单记录操作按钮 -->
    <script type="text/html" id="operate-bar">
    <div class="pear-btn-group">
    #shiroHasPermission('system:dict:edit')
        <button class="pear-btn pear-btn-primary pear-btn-sm" plain lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
    #end
    #shiroHasPermission('system:dict:list')
        <button class="pear-btn pear-btn-warming pear-btn-sm" plain lay-event="details"><i class="layui-icon layui-icon-transfer"></i></button>
    #end
    #shiroHasPermission('system:dict:del')
        <button class="pear-btn pear-btn-danger pear-btn-sm" plain lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
    #end
    </div>
    </script>
    
    <!-- 字典项操作按钮 -->
    <script type="text/html" id="detail-operate-bar">
    <div class="pear-btn-group">
    #shiroHasPermission('system:dict:edit')
        <button class="pear-btn pear-btn-primary pear-btn-sm" plain lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
    #end
    #shiroHasPermission('system:dict:del')
        <button class="pear-btn pear-btn-danger pear-btn-sm" plain lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
    #end
    </div>
    </script>
    
    <!-- 状态字段 -->
    <script type="text/html" id="bean-status">
    #[[
        {{# if(d.status === 'off') { }}
            <span class="layui-badge">禁用</span>
        {{# } else if(d.status === 'on') { }}
            <span class="layui-badge layui-bg-blue">启用</span>
        {{# } }}
    ]]#
    </script>

#include("/admin/_common/foot.html")
<script>
layui.use(['table', 'form', 'jquery', 'common'], function() {
    var $ = layui.jquery;
    var table = layui.table;
    var form = layui.form;
    var common = layui.common;

    // 模块操作路径
    var MODULE_PATH = "#(ctxPath)/admin/system/dict/";
    
    // 弹窗大小
    var AREA = [common.isModile() ? '100%' : '720px', common.isModile() ? '100%' : '600px'];

    // 排序对象
    var sortObj = {field:'sortNum', type:'asc'};

    // 监听行双击事件
    table.on('rowDouble(module-table)', function(obj){
        window.view(obj.data);
    });

    // 监听子项表格行双击事件
    table.on('rowDouble(detail-table)', function(obj){
        window.view(obj.data);
    });

    // 监听表格中每条记录的操作
    table.on('tool(module-table)', function(obj) {
        if (obj.event === 'remove') { //
            window.remove(obj);
        } else if (obj.event === 'details') {
            $("[lay-event='details']").attr("plain", "");
            $(obj.tr).find("[lay-event='details']").removeAttr("plain");

        	window.details(obj.data['id']);
        } else if (obj.event === 'edit') {
            window.addOrEdit("编辑", MODULE_PATH + "edit/" + obj.data['id']);
        }
    });

    // 监听子项表格中每条记录的操作
    table.on('tool(detail-table)', function(obj) {
        if (obj.event === 'remove') { //
            window.remove(obj);
        } else if (obj.event === 'edit') {
            window.addOrEdit("编辑", MODULE_PATH + "edit/" + obj.data['id']);
        }
    });

    // 表格上端的工具条
    table.on('toolbar(module-table)', function(obj) {
        if (obj.event === 'add') {
            window.addOrEdit("新增", MODULE_PATH + "add");
        } else if (obj.event === 'refresh') {
            window.refresh();
        } else if (obj.event === 'batchRemove') {
            window.batchRemove(obj);
        }
    });
    
    // 子项表格上端的工具条
    table.on('toolbar(detail-table)', function(obj) {
        if (obj.event === 'add') {
            window.addOrEdit("新增", MODULE_PATH + "add?parentId=" + $("[name='parentId']").val());
        } else if (obj.event === 'refresh') {
            window.refresh();
        } else if (obj.event === 'batchRemove') {
            window.batchRemove(obj);
        }
    });
    
    // 监听排序切换
    table.on('sort(module-table)', function(obj) {
        sortObj = obj;
        window.reloadTable();
    });

    // 页面上方的查询栏
    form.on('submit(module-query)', function() {
        window.reloadTable();
        $("[name='parentId']").val(0);
        $("#ID-detail-table").hide();
        $(".empty").show();
        return false;
    });

    // 状态字段切换
    form.on('switch(record-enable)', function(obj) {
        layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
    });

    /*
     * 刷新字典子项
     */
    window.details = function(obj) {
        $("[name='parentId']").val(obj);
        $(".empty").hide();
        $("#ID-detail-table").show();
        table.render({
            elem: '[lay-filter="detail-table"]',
            url: MODULE_PATH + "list?parentId=" + obj,
            page: false,
            skin: 'line',
            height: 'full-225',
            toolbar: '#detail-table-toolbar',
            defaultToolbar: ['filter', 'print', 'exports'],
            cols: [[
                {field: 'status', align: 'center', width: 70, title: '状态', templet: '#bean-status'},
                {field: 'name', align: 'left', width: 150, title: '名称'},
                {field: 'key', align: 'left', width: 150, title: '键'},
                {field: 'value', align: 'left', width: 180, title: '值'},
                {toolbar: '#detail-operate-bar', align: 'center', width: 100, title: '操作'},
                {field: 'sortNum', align: 'center', width: 80, title: '排序'}
            ]]
        });
    }
    
    /*
     * 打开新增或编辑页面
     */
    window.addOrEdit = function (title, actionUrl) {
        layer.open({
            type : 2,
            title : title,
            content : actionUrl,
            maxmin : false,
            area : AREA,
            closeBtn : 1,
            shadeClose : false,
            anim : 1,
            moveOut : false,
            resize : false,
            btn : [ '保存', '取消' ],
            yes : function(index, layero) {
                var iframeWindow = window['layui-layer-iframe' + index],
                submitID = 'data-save', // 此ID必须和弹出iframe窗口中提交按钮的ID和Filter值一致
                submit = layero.find('iframe').contents().find("#" + submitID);

                // 监听提交
                iframeWindow.layui.form.on('submit('+ submitID + ')', function(data) {
                    $.ajax({ // 用Ajax替换弹窗中的提交
                        url : MODULE_PATH + "saveOrUpdate",
                        type : "post",
                        data : data.field, // 获取提交的数据
                        beforeSend : function(){layer.load(1);}, // 防止重复操作
                        complete : function(){layer.closeAll('loading');}, //解除防重复操作
                        success : function(result){
                            if(result.success){
                                // 提交 Ajax 成功后，静态更新表格中的数据
                                window.reloadTable(); // 数据表格刷新
                                window.details($("[name='parentId']").val());
                                layer.close(index); //关闭弹层
                            } else {
                                if(result.message){
                                    // Ajax调用成功，但后台返回失败信息
                                    layer.alert("code=" + result.code + ", message=" + result.message, {icon: 0});
                                } else {
                                    layer.alert("操作失败！", {icon: 2});
                                }
                            }
                        },
                        error : function (e) { // Ajax调用失败
                            layer.alert("操作失败：" + e.responseText, {icon: 2});
                        }
                    });
                    return false; // 一定要返回False来阻止弹出窗口中提交按钮的再次提交
                });

                submit.trigger('click'); // 这里触发弹出窗口的提交按钮
            }
        });
    }

    /*
     * 确认删除操作
     */
    window.remove = function(obj) {
        layer.confirm('确定要删除该记录？', {
            icon: 3,
            title: '提示'
        }, function(index) {
            layer.close(index);
            var loading = layer.load();
            $.ajax({
                url: MODULE_PATH + "delete/" + obj.data['id'],
                dataType: 'json',
                type: 'delete',
                success: function(result) {
                    layer.close(loading);
                    if (result.success) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        }, function() {
                            obj.del();
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })
        });
    }

    /*
     * 批量删除操作
     */
    window.batchRemove = function(obj) {
        
        var checkIds = common.checkField(obj, 'id');
        
        if (checkIds === "") {
            layer.msg("未选中记录", {
                icon: 3,
                time: 1000
            });
            return false;
        }
        
        layer.confirm('确定要删除这些记录', {
            icon: 3,
            title: '提示'
        }, function(index) {
            layer.close(index);
            var loading = layer.load();
            $.ajax({
                url: MODULE_PATH + "batchDelete/" + checkIds,
                dataType: 'json',
                type: 'delete',
                success: function(result) {
                    layer.close(loading);
                    if (result.success) {
                        layer.msg("操作成功", {
                            icon: 1,
                            time: 1000
                        }, function() {
                            window.reloadTable();
                            window.details($("[name='parentId']").val());
                        });
                    } else {
                        layer.msg(result.message, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })
        });
    }

    /*
     * 刷新表格操作
     */
    window.refresh = function() {
        window.reloadTable();
    }

    /*
     * 刷新表格
     */
    window.reloadTable = function() {
        /* 查询参数 */
        var where = form.val("module-form");
            console.log(where);
            where.sortField = sortObj.field;
            where.sortType = sortObj.type;
        table.reload('module-table', {
            url: MODULE_PATH + "list?parentId=0",
            initSort: sortObj,
            where: where
        });
    }
    
    /*
     * 查看记录操作
     */
     window.view = function(data) {
        layer.open({
            type : 2,
            title : "查看记录",
            content : MODULE_PATH + "view/" + data.id,
            maxmin : false,
            area : AREA,
            closeBtn : 1,
            shadeClose : false,
            anim : 1,
            moveOut : false,
            resize : false,
            btn : [ '关闭' ],
            yes : function(index, layero) {
                layer.close(index); // 关闭弹层
            }
        });
    }
});
</script>
</body>
</html>
